<template>
  <div>
    <el-table :data="categories.categoriesList" row-key="cat_id" style="width: 100%" border stripe
      :default-expand-all="false" :lazy="true" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
      <el-table-column prop="cat_id" label="分类ID" sortable min-width="200" />
      <el-table-column prop="cat_name" label="分类名称" sortable min-width="200" />
      <el-table-column prop="cat_deleted" label="是否有效" sortable min-width="130" />
      <el-table-column prop="cat_level" label="分类层级" min-width="130">
        <template v-slot="scope">
          <el-tag type="success" v-if="scope.row.cat_level == '0'">一级</el-tag>
          <el-tag type="warning" v-else-if="scope.row.cat_level == '1'">二级</el-tag>
          <el-tag type="danger" v-else>三级</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="160" fixed="right">
        <template v-slot="scope">
          <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 编辑dialog框 -->
    <el-dialog title="编辑商品" v-model="categories.editDialog" width="50%">
      <!-- 表单 -->
      <el-form ref="editFormRef" :model="categories.editCategoriesQuery" :rules="editRules" label-position="top"
        status-icon>
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="categories.editCategoriesQuery.cat_name" placeholder="请输入分类名称"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <template #footer>
        <span slot="footer" class="dialog-footer">
          <el-button @click="categories.editDialog = false">取 消</el-button>
          <el-button type="primary" @click="editClick">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue"
import usersStore from "@/pinia/index.js";
const { categories } = usersStore();
// 表单验证对象
const editFormRef = ref(null);
// 表单验证规则
const editRules = reactive({
  cat_name: [
    { required: true, message: "请输入分类名称", trigger: "blur" },
    { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" }
  ]
});
// 获取分类列表数据
categories.REQUEST_categoriesList();
// 编辑
const handleEdit = (row) => {
  categories.editDialog = true;// 显示编辑dialog框
  categories.editCategoriesQuery = row;// 设置编辑数据
};
// 删除
const handleDelete = (row) => {
  categories.deleteCategoriesQuery = row;// 设置删除数据
  categories.REQUEST_deleteCategories()
};
// 确认编辑并提交
const editClick = () => {
  // 表单验证
  editFormRef.value.validate((valid) => {
    if (valid) {
      categories.REQUEST_editCategories();
    } else {
      console.log("error submit!!!");
      return false;
    }
  });
};


</script>

<style scoped>
</style>